<template>
  <div v-if="value.canBatchSetting" style="padding-bottom:16px">
    <div class="flex">
      <div style="padding-right:15px">批量设置</div>
      <div class="flex-con" style="font-size:12px;color:#999">在下方栏中选择内容进行批量填充</div>
      <div>
        <el-button :disabled="!batchSettingValidate" size="mini" type="primary" @click="handleBatchSetting">确定
        </el-button>
      </div>
    </div>
    <div class="flex">
      <div
        v-for="(item,itemIndex) in value.skuAllPropTypeList"
        :key="itemIndex"
        class="batch-setting-item"
      >
        <el-select
          v-if="item.options"
          v-model="item.value"
          :placeholder="item.title"
          size="mini"
          style="width:110px;margin-right:10px;"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :value="option.value"
            :label="option.label"
          ></el-option>
        </el-select>
        <template v-else-if="item.isIntegerField || item.isIntegerIncAndDecField">
          <div v-if="isEdit && item.isIntegerIncAndDecField" class="stock-btns" style="margin-right: 6px">
            <div class="stock-btn" :class="{'stock-btn--active':item.addFlag===1}" @click="item.addFlag=1">增</div>
            <div class="stock-btn" :class="{'stock-btn--active':item.addFlag===0}" @click="item.addFlag=0">减</div>
          </div>
          <input
            v-model="item.value"
            :style="[item.isIntegerIncAndDecField?{paddingLeft:'60px',width:'150px'}:null]"
            class="setting-input"
            :placeholder="item.title"
            type="text"
            @keydown="SkuUtil.handleLimitInteger"
          >
        </template>
        <input
          v-else-if="item.isFloatField"
          v-model="item.value"
          class="setting-input"
          type="text"
          @blur="SkuUtil.handleLimitFloatPrecision($event,item.precision || 2)"
          :placeholder="item.title"
          @keydown="SkuUtil.handleLimitFloat"
        >
        <input
          v-else-if="item.isTextField"
          v-model="item.value"
          class="setting-input"
          type="text"
          :placeholder="item.title"
        >
        <i
          v-if="!item.options && item.value"
          class="el-icon-circle-close setting__close"
          @click.stop="item.value=''"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import SkuUtil from '@/framework/components/sku/SkuUtil'
import SkuListEntity from '@/framework/components/sku/SkuListEntity'

export default {
  name: 'SkuBatchSetting',
  props: {
    value: {
      type: Object,
      default() {
        return new SkuListEntity()
      }
    }
  },
  data() {
    return {
      SkuUtil
    }
  },
  inject: {
    skuEditor: {
      default: null
    }
  },
  computed: {
    batchSettingValidate() {
      console.log(this.value.skuAllPropTypeList)
      return this.value.skuAllPropTypeList.some(el => !el.propTypeFlag && el.value.trim())
    },
    isEdit() {
      return (this.skuEditor || {}).isEdit
    }
  },
  methods: {
    handleBatchSetting() {
      this.value.batchSetValue()
    }
  }
}
</script>

<style scoped lang="scss">

.setting-input {
  width: 110px;
  margin-right: 10px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  // padding: 6px;
  background-color: #fff;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px 0 10px;
}

.batch-setting-item {
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stock-btn {
  text-align: center;
  cursor: pointer;
  width: 21px;
  line-height: 20px;
  user-select: none;
}

.stock-btn--active {
  background-color: #454a5f;
  color: #fff;
}

.stock-btns {
  display: flex;
  flex-direction: row;
  margin-right: 5px;
  font-size: 12px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #454a5f;
  border-radius: 2px;
}

.setting__close {
  position: absolute;
  cursor: pointer;
  right: 14px;
  color: #999;
  top: 50%;
  transform: translateY(-50%);
}
</style>
